import { SearchBar } from "antd-mobile";
import { SearchOutline } from "antd-mobile-icons";

export default function MySearchBar({
  searchValue,
  setSearchValue,
  searchRef,
  onSearch = (v?: any) => {},
  onFocus = () => {},
}) {
  return (
    <SearchBar
      value={searchValue}
      ref={searchRef}
      placeholder="请输入关键字"
      onSearch={onSearch}
      onClear={() => onSearch("")}
      onChange={(v) => setSearchValue(v)}
      onFocus={onFocus}
      icon={<SearchOutline onClick={onSearch} />}
      style={{
        "--border-radius": "6.25rem",
        "--background": "#EFF2F8",
        "--height": "5.5rem",
        "--padding-left": "2.4375rem",
      }}
    />
  );
}
